<script setup>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { storeA } from "../piniaStore/storeA.js";
const router = useRouter();
const store = useStore();
const piniaStoreA = storeA();
console.log("pinia", piniaStoreA.piniaMsg);
console.info(
  "%c路由练习/vuex/pinia",
  "color: #3190e8; font-size: 30px; font-family: sans-serif"
);
const handlebutn = () => {
  router.push("/about");
};

//vuex练习start-------------------------------------------
console.log("vuexStore:", store);
const handleVuexBtn = () => {
  store.commit("increment", 23);
  // store.commit('increment')
};
const handleVuexBtn2 = () => {
  // store.commit("increment", 23);
  store.commit({
    type: "incre2",
    num: 12,
  });
  // store.commit('increment')
};

const handleVuexBtn3 = () => {
  store
    .dispatch("sum_actions", -10)
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
};

// pinia练习start----------------------------------------
</script>

<template>
  <div class="main-box">
    {{ $route.params.id }}
    <button @click="handlebutn">点击跳转about页面</button>
    <button @click="router.go(-1)">点击以后退</button>
  </div>
  <hr />
  <p style="color: red; font-weight: 700">vuex使用</p>
  <div>
    <div>con： {{ $store.state.con }}</div>
    <button @click="handleVuexBtn">触发store中的方法改变con</button>
    <button @click="handleVuexBtn2">触发store中的incre2</button>
    <button @click="handleVuexBtn3">触发store中的异步方法改变con+1</button>
  </div>
  <hr />
  <div>
    <div>getter不传参：{{ $store.getters.getterone }}</div>
    <div>getter传参：{{ $store.getters.gettertwo(200) }}</div>
  </div>
  <hr />
  <p style="color: red; font-weight: 700">pinia使用</p>
</template>

<style lang="less" scoped>
.main-box {
  display: flex;
  padding: 20px;
}
</style>
